<template>
		<view class="borderTop">
			<block v-if='haveList'>
				<view class="stationList me-fx-row-sb" v-for="(item, index) in stationList">
					<view class="picPos">
						<image :src="item.user.avatar" mode="" class="avatar" @click="avatar(item.user.id)"></image>
					</view>
					<view class="stationListRight" @click.stop="stationListBtn(item.id)">
						<view class="headPicBox me-fx-row-start-c">
							<view class="headPicRight" >
								<view class="me-fx-row-start-c">
									<view class="headFont">{{item.user.username}}</view>
									<image src="../../static/img/gril.png" mode="" v-if="sexPic ==item.user.gender " class="sexPic"></image>
									<image src="../../static/img/boy3.png" mode="" v-else class="sexPic"></image>
									<image src="../../static/img/vip.png" mode="" class="vip" v-if="item.vip=='1' "></image>
								</view>
								<view class="time">
									{{item.created_at}}
								</view>
							</view>
						</view>
						<view class="functionBox" >
							<block v-if="item.type=='2'">
								<view class="functionList me-fx-row-start-c" v-if="item.publishShow.showMenu.name != ''">
									<image src="../../static/img/newimg/a19.png" mode=""></image>
									<view class="functionFont">
										{{item.publishShow.showMenu.name}}
									</view>
								</view>
								<view class="functionList me-fx-row-start-c" v-if="item.publishShow.appointed_time != ''">
									<image src="../../static/img/newimg/a22.png" mode=""></image>
									<view class="functionFont">
										{{item.publishShow.appointed_time}}
									</view>
								</view>
								<view class="functionList me-fx-row-start-c" v-if="item.publishShow.city !=''">
									<image src="../../static/img/newimg/a20.png" mode=""></image>
									<view class="functionFont">
										{{item.publishShow.city}}
									</view>
								</view>
								<view class="functionList me-fx-row-start-c" v-if="item.publishShow.expectObjTag.name!=''">
									<image src="../../static/img/newimg/a21.png" mode=""></image>
									<view class="functionFont">
										{{item.publishShow.expectObjTag.name}}
									</view>
								</view>
								<view class="picList me-fx-row-start-c">
									<image :src="item2" mode="" v-for="(item2, index) in item.images"></image>
								</view>
							</block>
							<block v-else>
								<view class="nohave" v-if="item.content ==' '">
								</view>
								<view class="functionList me-fx-row-start-c" v-else>
									<image src="../../static/img/dongtai.png" mode=""></image>
									<view class="functionFont">
										{{item.content}}
									</view>
								</view>
								<view class="picList me-fx-row-start-c">
									<image :src="item2" mode="" v-for="(item2, index) in item.images"></image>
								</view>
							</block>
						</view>
										
						<view class="me-fx-row-sa-c bottomFunBox">
							<view class="me-fx-col-sa-c " @click.stop="dianzannBtn(item.id,index)">
								<image src="../../static/img/zan1.png" mode="" v-if="item.is_praise == '2'"></image>
								<image src="../../static/img/zan2.png" mode="" v-else></image>
								<view class="bottomFunFont">
									{{item.praise_count}}
								</view>
							</view>
							<view class="me-fx-col-sa-c" @click.stop="pinglunBtn(item.id)">
								<image src="../../static/img/pinglun2.png" mode=""></image>
								<view class="bottomFunFont">
									评论
								</view>
							</view>
							<view class="me-fx-col-sa-c" @click.stop="baomingBtn(item.id)" v-if="item.type=='1'">
								<image :src="baomingPic" mode=""></image> 
								<view class="bottomFunFont">
									我要报名(0)
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="nohaveList" v-if="nohaveList">
				没有更多数据~
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				optionsID: '',
				optionsName: '',
				stationList: [],
				last_page: 1,
				page: 1,
				sexPic:0,
				sexPic:2,
				nohaveList:false,
				haveList:false
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			if (option.id) {
				this.optionsID = option.id
			}
			if (option.name) {
				this.optionsName = option.name
			}
			uni.setNavigationBarTitle({
				title: this.optionsName
			})
		},
		created() {
			this.indexData()
		},
		
		methods: {
			avatar(id){
				uni.navigateTo({ 
					url: '../station/headDetails?id=' + id
				})
				
			},
			stationListBtn(id) {
				uni.navigateTo({
					url: '../station/listdetails?id=' + id
				})
			},
			pinglunBtn(id) {
				uni.navigateTo({
					url: '../station/listdetails?id=' + id
				})
			},
			indexData() {
				this.$u.get('/publish/lists/by_show/' + this.page, {
						id: this.optionsID
					}).then(res => {
						if (res) {
							this.stationList = res.data.list.data;
							if(this.stationList.length > 0){
								this.haveList = true
								this.nohaveList =false
							}else{
								this.haveList = false
								this.nohaveList =true
							}
							this.last_page = res.data.list.last_page
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			dianzannBtn(id, index) {
				this.$u.post('/publish/praise', {
						id: id
					}).then(res => {
						if (res) {
							uni.showToast({
								title: res.message,
								duration: 1000,
								icon: 'none'
							})
							if (this.stationList[index].is_praise == 1) {
								this.stationList[index].praise_count = this.stationList[index].praise_count - 1
								this.stationList[index].is_praise = '2'
							}else {
								this.stationList[index].praise_count = this.stationList[index].praise_count + 1
								this.stationList[index].is_praise = '1'
							}
						
						}
					})
					.catch((res) => {
						console.log(res)
					})
			},
		}
	}
</script>

<style>

.stationList{
	padding: 26rpx;
}
	.borderTop .stationList:nth-of-type(n+2) {
		padding: 20rpx;
		border-top: 1rpx solid #F8F6FF;
	}

	.functionBox {
		/* margin-top: 40rpx; */
		padding: 16rpx 0;
	}
	.stationList .avatar {
		width: 84rpx;
		height: 84rpx;
		border-radius: 16rpx;
	}

	.headPicRight {
		/* margin-left: 20rpx; */
	}

	.headPicRight .time {
		font-size: 26rpx;
		color: #AAAAAA;
	}

	.headPicRight .headFont {
		font-size: 30rpx;
		font-weight: 700;
	}

	.headPicBox .headPicRight image {
		margin-left: 20rpx;
	}

	.functionList {
		margin: 10rpx 0;
	}

	.functionList image {
		width: 30rpx;
		height: 30rpx;
	}

	.functionList .functionFont {
		margin-left: 10rpx;
		font-size: 30rpx;
		color: rgba(51, 51, 51, 1);
	}

	.bottomFunBox {
		width: 80%;
		margin: 0rpx 0rpx 24rpx;

	}

	.bottomFunBox view image {
		width: 40rpx;
		height: 40rpx;
	}

	.bottomFunBox .bottomFunFont {
		text-align: center;
		font-size: 24rpx;
		color: #AAAAAA;
	}

	.rightFiex {
		position: absolute;
		top: 0rpx;
		right: 0;
		width: 300rpx;
		height: 281rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(149, 149, 149, 0.2);
		border-radius: 0rpx 0rpx 0rpx 6rpx;
		padding: 0 0 0 74rpx;
		box-sizing: border-box;
	}

	.rightFiex image {
		width: 44rpx;
		height: 44rpx;
		display: block;
		margin-right: 17rpx;
	}

	.rightOne {
		height: 140rpx;
	}

	.rightOne:nth-of-type(2) {
		height: 140rpx;
		border-top: 1rpx solid rgba(249, 246, 255, 1);
	}

	.rightFont {
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
	}

	.programBox {
		width: 90%;
		margin: 300rpx auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(185, 185, 185, 0.24);
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
	}

	.programBox .programHead .headBox {
		font-size: 34rpx;
		color: rgba(51, 51, 51, 1);
	}

	.programBox .programHead image {
		width: 47rpx;
		height: 46rpx;
		text-align: right;
	}

	.programList {
		flex-wrap: wrap;
		align-content: flex-start;
		padding: 50rpx 0 0 0;
	}

	.programList .program {
		width: 25%;
		margin-top: 35rpx;
	}

	.programList .program image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.headPicRight .sexPic {
		width: 20rpx !important;
		height: 26rpx !important;
	}

	.headPicRight .vip {
		width: 50rpx;
		height: 25rpx;
	}

	.nohave {
		width: 0rpx;
		height: 0rpx;
	}

	.picList {
		padding: 39rpx 0rpx;
		box-sizing: border-box;
	}

	.picList image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 14rpx;
	}
	.nohaveList{
		padding: 26rpx;
		font-size: 32rpx;
	}
	
	.stationListRight{
		width: 100%;
		margin-left: 20rpx;
	}
</style>
